<template>
	<div>
		<div class="title">
			<h3>安全教育培训管理</h3>
		</div>
		<div class="cont">
			<div class="cont-title">
				<span @click="tojihua">计划</span><span class="active">台账</span>
			</div>
			<div class="cont-box">
				<div class="btn">
					<el-button type="success" @click="add = true"><i class="el-icon-plus"></i>新建</el-button>
					<el-button type="primary">查询</el-button>
					<el-button>重置</el-button>
					<el-button class="purple"><i class="el-icon-download"></i>导出</el-button>
				</div>
				<div class="pf">
					<div class="pf-one">
						<span>培训类型:</span>
						<el-select></el-select>
					</div>
					<div class="pf-one">
						<span>培训名称:</span>
						<el-select></el-select>
					</div>
					<div class="pf-one">
						<span>培训时间:</span>
						<el-date-picker range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" v-model="value1" type="daterange">
						</el-date-picker>
					</div>
				</div>
				<div class="table">
					<el-table :data="tableData" style="width: 100%" class="tablebox" :header-cell-style="{background:'#FAFAFA',color:'#606266'}">
						<el-table-column prop="date" label="序号" width="80">
						</el-table-column>
						<el-table-column prop="name" label="培训类型" width="180">
						</el-table-column>
						<el-table-column prop="pxmc" label="培训名称">
						</el-table-column>
						<el-table-column prop="pxrs" label="培训人数">
						</el-table-column>
						<el-table-column prop="pxdx" label="培训对象">
						</el-table-column>
						<el-table-column prop="nd" label="年度">
						</el-table-column>
						<el-table-column prop="jhsj" label="计划时间">
						</el-table-column>
						<el-table-column prop="fzr" label="负责人">
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button @click="dialogFormVisible = true" type="text">编辑</el-button>
								<el-button type="text">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="fyq">
						<span>共 3 条数据</span>
						<div class="fyq-r">
							<el-pagination background layout="prev, pager, next" :total="10">
							</el-pagination>
							<select>
								<option selected="selected">10条/页</option>
							</select>
						</div>
					</div>
				</div>
			</div>
		</div>
		<el-dialog :visible.sync="dialogFormVisible" class="tc">
			<h5>台账编辑</h5>
			<div class="jbxx">
				<h5>安全培训教育计划</h5>
				<div class="pf">
					<div class="pf-one">
						<h6 class="a">培训类型</h6>
						<el-select></el-select>
					</div>
					<div class="pf-one">
						<h6 class="a">培训名称</h6>
						<el-input placeholder="培训4"></el-input>
					</div>
					<div class="pf-one">
						<h6 class="a">培训人数</h6>
						<el-input placeholder="123"></el-input>
					</div>
				</div>
				<div class="pf">
					<div class="pf-one">
						<h6 class="a">培训对象</h6>
						<el-input placeholder="123"></el-input>
					</div>
					<div class="pf-one">
						<h6 class="a">计划时间</h6>
						<el-date-picker type="date" placeholder="2019-07-13">
						</el-date-picker>
					</div>
					<div class="pf-one">
						<h6 class="a">负责人</h6>
						<el-input placeholder="123"></el-input>
					</div>
				</div>
				<h6>培训内容<span>(不超过4000字)</span></h6>
				<el-input type="textarea" :rows="2" placeholder="123"></el-input>
			</div>
			<div class="jbxx">
				<h5>附件</h5>
				<div class="pf">
					<div class="pf-one">
						<h6 class="a">签到表(附件)</h6>
						<el-button size="small" type="primary">点击上传</el-button>
					</div>
					<div class="pf-one">
						<h6 class="a">照片(附件)</h6>
						<el-button size="small" type="primary">点击上传</el-button>
					</div>
					<div class="pf-one">
						<h6 class="a">其他(附件)</h6>
						<el-button size="small" type="primary">点击上传</el-button>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">关闭</el-button>
				<el-button type="primary" @click="dialogFormVisible = false">保存</el-button>
			</div>
		</el-dialog>
		<!-- add -->
		<el-dialog :visible.sync="add" class="tc">
			<h5>台账编辑</h5>
			<div class="jbxx">
				<h5>安全培训教育计划</h5>
				<div class="pf">
					<div class="pf-one">
						<h6 class="a">培训类型</h6>
						<el-select placeholder="  "></el-select>
					</div>
					<div class="pf-one">
						<h6 class="a">培训名称</h6>
						<el-input></el-input>
					</div>
					<div class="pf-one">
						<h6 class="a">培训人数</h6>
						<el-input></el-input>
					</div>
				</div>
				<div class="pf">
					<div class="pf-one">
						<h6 class="a">培训对象</h6>
						<el-input></el-input>
					</div>
					<div class="pf-one">
						<h6 class="a">计划时间</h6>
						<el-date-picker type="date">
						</el-date-picker>
					</div>
					<div class="pf-one">
						<h6 class="a">负责人</h6>
						<el-input></el-input>
					</div>
				</div>
				<h6>培训内容<span>(不超过4000字)</span></h6>
				<el-input type="textarea"></el-input>
			</div>
			<div class="jbxx">
				<h5>附件</h5>
				<div class="pf">
					<div class="pf-one">
						<h6 class="a">签到表(附件)</h6>
						<el-button size="small" type="primary">点击上传</el-button>
					</div>
					<div class="pf-one">
						<h6 class="a">照片(附件)</h6>
						<el-button size="small" type="primary">点击上传</el-button>
					</div>
					<div class="pf-one">
						<h6 class="a">其他(附件)</h6>
						<el-button size="small" type="primary">点击上传</el-button>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">关闭</el-button>
				<el-button type="primary" @click="dialogFormVisible = false">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dialogTableVisible: false,
				dialogFormVisible: false,
				add: false,
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				formLabelWidth: '120px',
				tableData: [{
					date: '1',
					name: '特种人员安全教育',
					pxmc: "培训4",
					pxrs: '123',
					pxdx: "123",
					nd: "2020",
					jhsj: "1月份",
					fzr: "123",

				}, {
					date: '2',
					name: '特种人员安全教育',
					pxmc: "培训4",
					pxrs: '123',
					pxdx: "123",
					nd: "2020",
					jhsj: "1月份",
					fzr: "123",

				}, {
					date: '3',
					name: '特种人员安全教育',
					pxmc: "培训4",
					pxrs: '123',
					pxdx: "123",
					nd: "2020",
					jhsj: "1月份",
					fzr: "123",

				}, ]
			}
		},
		methods: {
			tojihua: function() {
				this.$router.push("/safeedu")
			}
		}
	}
</script>

<style>
	.el-dialog {
		width: 1140px;
		height: 800px;
		margin-left: 200px;
	}

	.el-dialog__body {
		padding: 10px 20px;
	}

	.el-dialog__header {
		padding: 0px;
	}

	.tc h5 {
		margin: 0px;
		padding: 10px 0px;
		border-bottom: 1px solid #F9F9F9;
	}

	h3 {
		padding: 0px 0px 10px 0px;
		border-bottom: 1px solid #F9F9F9;
	}

	.jbxx {
		padding: 0px 20px;
	}

	.fjxx {
		padding: 0px 20px;
	}

	h6 {
		margin: 10px 0px;
	}

	.jbxx p {
		color: #FF6161;
	}

	.pf {
		display: flex;
		justify-content: space-between;
		margin: 25px 0px;
		padding: 0px !important;
	}

	.jbxx .pf .el-input__inner {
		width: 330px;
		margin: 0px !important;
	}

	.pf-one {
		flex: 1;
	}

	.jbxx .el-input__inner {
		width: 400px;
	}

	.el-dialog {
		margin-top: 0px !important;
		margin-bottom: 0px !important;
	}

	.cell>button:nth-child(1) {
		color: #078BFF !important;
		transform: scale(1);
	}

	.cell>button:nth-child(2) {
		color: #F17B70 !important;
		transform: scale(1);
	}

	.fyq {
		margin: 10px 0px;
		display: flex;
		justify-content: space-between;
	}

	.fyq span {
		font-size: 14px;
		color: #9093A6;
	}

	.el-pagination {
		display: inline-block;
	}

	.fyq-r select {
		height: 28px;
		border: 1px solid #DCDCDC;
		outline: none;
		padding: 2px 0px;
	}

	.title {
		background: #E6F7FF;
		border: #A4DDFF 1px solid;
		margin: 10px 0px 10px 10px;
	}

	.title h3 {
		padding: 4px 0px;
		margin: 0px 0px 0px 10px;
	}

	.cont {
		width: 100%;
		background: white;
		box-sizing: border-box;
		padding: 20px;
	}

	.cont-title {
		padding: 10px 6px;
		border-bottom: 1px solid #F9F9F9;
	}

	.cont-title span {
		padding: 10px 6px;
		margin-right: 30px;
		color: #B3B3B3;
	}

	.cont-title .active {
		color: #0188FF;
		border-bottom: #0188FF 3px solid;
	}

	.cont-box {
		width: 100%;
		height: 490px;
		border: 1px solid #F3F3F3;
		box-sizing: border-box;
		margin: 20px 0px;
	}

	.purple {
		background: #8071EE;
		color: white;
	}

	.btn {
		margin: 20px 20px;
	}

	.el-button {
		transform: scale(0.8)
	}

	.cont-box .pf {
		display: flex;
		padding: 0px 20px !important;
	}

	.pf .el-input__inner {
		width: 217px;
	}

	.pf .el-input__inner {
		margin: 0px 9px;
	}

	.table {
		padding: 0px 20px;
		margin-top: 20px;
	}
</style>
